<template>
  <a-modal
    v-model="visible"
    :title="title"
    cancel-text="取消"
    ok-text="确认"
    :width="modalWidth"
    @cancel="handleCancel"
    footer=""
    :maskClosable="false"
    :destroyOnClose="true"
    @ok="handleOk"
  >
    <template>
      <div class="modalBut">
        <a-button @click="handleCancel">
          取消
        </a-button>
        <a-button @click="handleOk" type="primary">确认</a-button>
      </div>
    </template>
    <a-form-model :labelCol="labelCol" :model="model" :wrapperCol="wrapperCol">
      <a-row>
        <a-col>
          <a-form-model-item label="处理方式">
            <a-select
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              v-model="model.resolveMethod"
              placeholder="请选择处理方式"
              style="width: 100%"
            >
              <a-select-option
                v-for="(item, index) in AlarmList"
                :key="index"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <br />
        <a-col v-if="model.resolveMethod === '其他'">
          <a-form-model-item label="备注">
            <a-input v-model="model.remark" placeholder="请输入备注"></a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import api from "@/api/apiServer.js";
import { AlarmList } from "./config";

export default {
  data() {
    return {
      title: "报警处理",
      model: {
        remark: "",
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
      visible: false,
      modalWidth: 500, // 抽屉宽度
      AlarmList,
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    async handleOk() {
      if (this.model.resolveMethod) {
        let params = {
          ids: this.model.ids,
        };
        if (this.model.resolveMethod === "其他") {
          params.resolveMethod =
            this.model.resolveMethod + ":" + this.model.remark;
        } else {
          params.resolveMethod = this.model.resolveMethod;
        }
        const res = await api.UpdateWebMacAlarmResolveByIds(params);
        if (res.code === 200) {
          this.$message.success("处理成功");
          this.visible = false;
          this.$emit("setData");
          this.model = {};
        } else {
          this.$message.error(res.MsgDesc);
        }
      } else {
        this.$message.error("请选择处理方式");
      }
    },
    handleCancel() {
      this.visible = false;
      this.model = {};
    },
  },
};
</script>
